const {SyncHook} = require('tapable')
// 学前端
// 流程: 1.开始学习前端 2.学html 3.学css 4.学js 5.学react
// 生命周期
class Frontend {
  constructor() {
    // 1.定义好钩子(定义生命周期)
    this.hooks = {
      // 如果需要在call时传参, 则需要在 new SyncHook 时定义需要的参数
      beforeStudy: new SyncHook(),
      afterHtml: new SyncHook(),
      afterCss: new SyncHook(),
      afterJs: new SyncHook(),
      afterReact: new SyncHook(['name'])
    }
  }
  study() {
    // 2.让钩子在指定阶段触发
    console.log('开始学前端啦!!!')
    this.hooks.beforeStudy.call()

    console.log('开始学html啦!!!')
    this.hooks.afterHtml.call()
    // 抽象化
    console.log('开始学css啦!!!')
    this.hooks.afterCss.call()

    console.log('开始学js啦!!!')
    this.hooks.afterJs.call()

    console.log('开始学react啦!!!')
    this.hooks.afterReact.call('星城哈哈')
  }
}

let f = new Frontend()
// 3.注册事件
f.hooks.afterHtml.tap('afterHtml', () => {
  console.log('学完html, 我想写个淘宝')
})
f.hooks.afterJs.tap('afterJs', () => {
  console.log('学完js, 我想写个webpack')
})
f.hooks.afterReact.tap('afterReact', (name) => {
  console.log(name)
  console.log('学完react, 我想写个博客')
})
f.study()